<template>
  <div class="articlescomsBox">
    <div class="title">
      <span class="iconfont iconjiantou2"></span>
      <span class="iconfont iconnew"></span>
      <div
        class="concerns"
        :class="{ noconcerns: !newlist.has_follow }"
        @click="isfollow"
      >
        {{ !newlist.has_follow ? "关注" : "已关注" }}
      </div>
    </div>
    <div class="articeBox" v-if="newlist.type == 1">
      <div class="articeTitle">
        {{ newlist.title }}
        <div class="info">
          <span class="nickname">{{ newlist.user.nickname }}</span>
          <span class="time">{{ newlist.user.create_date.split("T")[0] }}</span>
        </div>
      </div>
      <div class="artice" v-html="newlist.content"></div>
    </div>
    <div class="videoBox" v-else>
      <div class="piay">
        <iframe
          src="//player.bilibili.com/player.html?aid=17310270&bvid=BV1UW411b7LJ&cid=28283697&page=1"
          scrolling="no"
          border="0"
          frameborder=" false"
          framespacing="0"
          allowfullscreen="true"
        >
        </iframe>
        <div class="videoTitle">
          <div class="info">
            <img src="../assets/logo.png" alt="" v-if="!newlist.user" />
            <img
              v-else
              :src="$axios.defaults.baseURL + newlist.user.head_img"
              alt=""
            />
            <span class="nickname" v-if="!newlist.user">加载中。。。</span>
            <span class="nickname" v-else>{{ newlist.user.nickname }}</span>
          </div>
          {{ newlist.title }}
        </div>
      </div>
    </div>

    <div class="footer">
      <div
        class="likes"
        :class="{ islikeslength: newlist.has_like }"
        @click="dianzan"
      >
        <span class="iconfont icondianzan"></span>
        <span class="likeslength">{{ newlist.like_length }}</span>
      </div>
      <div class="wx"><span class="iconfont iconweixin"></span>微信</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newlist: []
    };
  },
  mounted() {
    this.getnew();
  },
  methods: {
    isfollow() {
      if (this.newlist.has_follow == false) {
        this.$axios({
          url: "/user_follows/" + this.newlist.user.id
        }).then(res => {
          if (res.data.message == "关注成功") {
            this.newlist.has_follow == true;
            this.getnew();
          }
        });
      } else {
        this.$axios({
          url: "/user_unfollow/" + this.newlist.user.id
        }).then(res => {
          this.newlist.has_follow == false;
          this.getnew();
        });
      }
    },
    getnew() {
      this.$axios({
        url: "/post/" + this.$route.params.id
      }).then(res => {
        console.log(res.data.data);
        this.newlist = res.data.data;
      });
    },
    dianzan() {
      this.$axios({
        url: "/post_like/" + this.newlist.id
      }).then(res => {
        console.log(res);
        if (res.data.message == "点赞成功") {
          this.newlist.like_length += 1;
        } else if (res.data.message == "取消成功") {
          this.newlist.like_length -= 1;
        }
        this.getnew();
      });
    }
  }
};
</script>

<style lang="less" scoped>
.articlescomsBox {
  padding: 0 5.556vw;
  .title {
    display: flex;
    align-items: center;
    .iconjiantou2 {
      font-size: 4.444vw;
    }
    .iconnew {
      font-size: 16.667vw;
      flex: 1;
    }
    .concerns {
      font-size: 3.333vw;
      width: 11.111vw;
      text-align: center;
      line-height: 2.778vw;
      height: 2.778vw;
      padding: 1.389vw;
      border: 0.278vw solid #3333;
      border-radius: 5.556vw;
    }
    .noconcerns {
      background: crimson;
      color: #ffffff;
    }
  }
  .articeBox {
    .articeTitle {
      font-size: 5vw;
      font-weight: 600;
      margin-bottom: 5.556vw;
      .info {
        font-size: 3.333vw;
        color: #c6c6c6;
        font-weight: 400;
        .time {
          margin: 0 2.778vw;
        }
      }
    }
    .artice {
      /deep/img {
        max-width: 100%;
      }
      font-size: 3.889vw;
      color: #333333;
    }
  }
  .videoBox {
    .videoTitle {
      font-size: 5vw;
      font-weight: 600;
      margin-bottom: 5.556vw;
      .info {
        margin: 2.778vw 0;
        display: flex;
        align-items: center;
        font-size: 3.333vw;
        color: #c6c6c6;
        font-weight: 400;
        img {
          margin-right: 1.389vw;
          width: 11.111vw;
          border-radius: 50%;
        }
      }
    }
    .piay {
      iframe {
        width: 100%;
        height: 44.444vw;
      }
    }
  }
  .footer {
    margin: 8.333vw 0;
    display: flex;
    justify-content: space-around;

    .likes {
      font-size: 3.333vw;
      width: 13.889vw;
      text-align: center;
      line-height: 2.778vw;
      height: 2.778vw;
      padding: 1.389vw;
      border: 0.278vw solid #3333;
      border-radius: 5.556vw;

      .icondianzan {
        margin: 0 1.389vw;
      }
    }
    .islikeslength {
      background: #ffd73c;
      color: #ffffff;
    }
    .wx {
      font-size: 3.333vw;
      width: 13.889vw;
      text-align: center;
      line-height: 2.778vw;
      height: 2.778vw;
      padding: 1.389vw;
      border: 0.278vw solid #3333;
      border-radius: 5.556vw;
      .iconweixin {
        color: #00c800;
      }
    }
  }
}
</style>